<template>
	<div id="match-header-container">
		<div class="match-header-row">
			<!-- 倒计时 -->
			<!-- <div class="" v-if="!timeshow">
        结束剩余
        <span>{{ time.d }}</span>
        天
        <span>{{ time.h }}</span>
        时
        <span>{{ time.m }}</span>
        分
        <span>{{ time.s }}</span>
        秒
      </div> -->
			<div class="header-box">
				<el-tooltip effect="dark" :content="title">
					<div class="header-title">
						{{ title }}
					</div>
				</el-tooltip>
				<el-tag v-if="isMatch" class="header-activityTag" :type="jianchatime(match, datenow).type" effect="dark"
					size="default">
					{{ jianchatime(match, datenow).text2 }}
				</el-tag>
				<!-- <div class="header-activityTag" :class="jianchatime(match).type">
          {{ jianchatime(match).text2 }}
        </div> -->
				<span class="savetime" v-if="savetime">已保存 {{ savetime }} &nbsp;
					<el-icon>
						<UploadFilled />
					</el-icon>
				</span>
			</div>
			<div class="match-header-btn-box">
				<div class="">
					<el-button plain class="next-btn"
						@click="router.push({ name: routername, params: { index: index - 1, }, })"
						:type="(des === 'T' || questionlist.length == 1) ? 'info' : ''"
						:disabled="des === 'T' || questionlist.length == 1">
						<el-icon>
							<ArrowLeftBold />
						</el-icon>
						上一题
					</el-button>
					<span class="question-index-wrapper">
						<span class="question-index">{{ index + 1 }}</span>
						/
						<span class="question-index">{{ questionlist.length }}</span>
					</span>
				</div>
				<el-button plain class="next-btn"
					@click="router.push({ name: routername, params: { index: index + 1, }, })"
					:type="(des === 'F' || questionlist.length == 1) ? 'info' : ''"
					:disabled="des === 'F' || questionlist.length == 1">
					下一题
					<el-icon>
						<ArrowRightBold />
					</el-icon>
				</el-button>
				<div class="match-drawer-container">
					<el-drawer class="match-el-drawer" size="700px" title="题目列表" direction="ltr" v-model="listshow"
						:with-header="false">
						<Questionlist v-show="listshow" @update:listshow="hiddenList"
							v-bind="{ questions: questionlist, index, routername, userquestion: matchuser?.userquestion || [], match }">
						</Questionlist>
					</el-drawer>
				</div>
				<div>
					<el-button size="default" class="next-btn show-question-list-btn" @click.stop="showMatchQuestions">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-Menu" />
						</svg>
						&nbsp; 查看题目列表
					</el-button>
				</div>
				<el-button size="default" v-if="isMatch" class="next-btn" @click="back">
					返回比赛首页
				</el-button>
			</div>
			<!-- <el-button size="default" :loading="saveloading" class="a18" @click="save">保存试卷</el-button> -->
			<!-- 将按钮移动到 头部 -->
			<div class="match-header-submit-btn-box">
				<div v-if="isMatch && match.format === 'IOI'">
					<el-button size="default" class="a18 next-btn" :loading="loading" @click="mySubmit(false)">
						<el-icon>
							<UploadFilled />
						</el-icon>
						&nbsp; 提交题目
					</el-button>
					<el-button type="primary" class="a18 next-btn" :loading="loading" @click="mySubmit"> <el-icon>
							<UploadFilled />
						</el-icon>
						&nbsp; 提交试卷
					</el-button>
				</div>
				<el-button type="primary" v-else class="a18 next-btn" :loading="loading" @click="mySubmit"> <el-icon>
						<UploadFilled />
					</el-icon>
					&nbsp; 提交试卷
				</el-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ArrowLeftBold, ArrowRightBold, UploadFilled } from '@element-plus/icons-vue';
import { ElDrawer } from 'element-plus';
import { computed, onMounted, onUnmounted, ref, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { Apimatchuserquestion, asyncselectmatchuserquestion } from '../../../api';
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { jianchatime } from "@/util/jianchatime";
import { SMP } from "./interface";
import Questionlist from "./questionlist.vue";

const p = withDefaults(defineProps<{
	index: number,
	questionlist: Studycodemodel.Imatchquestion[],
	routername?: string,
	userquestion: Studycodemodel.Iuserquestion[],
	time: SMP["time"],
	title: string | undefined,
	submit: any,
	timeshow?: boolean,
	save?: () => {},
	saveloading?: boolean,
	savetime?: string,
	match: SMP["match"],
	isMatch: boolean // 区分测评模式和比赛模式
}>(), { index: 0, routername: "比赛答题", })

const { index, questionlist, userquestion, time, title, submit, timeshow, save, saveloading, savetime, match, isMatch } = toRefs(p);
const router = useRouter();
const store = useStore(Storekey)
const datenow = computed(() => {
	return store.state.time
})
const des = ref<"T" | "F" | undefined>("T");

const listshow = ref(false);
function hiddenList(v: boolean) {
	listshow.value = v;
}
async function showMatchQuestions() {
	// 需要更新 userquestion
	await getuserquestion()
	listshow.value = !listshow.value
}
const matchuser = ref<Apimatchuserquestion>();
async function getuserquestion() {
	matchuser.value = await asyncselectmatchuserquestion({ ID: match.value.ID, my: true, });
}


onMounted(() => {
	start();
});
onUnmounted(() => {
	// 判空
})

function back() {
	save.value?.();
	router.push({ name: '比赛详情', params: { ID: match.value.ID } })
}

watch(() => index.value, () => { start(); });
function start() {
	if (index.value == 0) {
		des.value = "T";
	} else if (index.value == questionlist.value.length - 1) {
		des.value = "F";
	} else if (questionlist.value.length && index.value >= questionlist.value.length) {
		console.log("in", questionlist.value.length)
		router.push({ name: "比赛答题", params: { index: 0, }, });
	} else {
		des.value = undefined;
	}
}

// 原header
const show = ref(true);
const user = computed(() => {
	return store.state.user
})

const loading = ref(false);
// 提交试卷
function mySubmit(b: boolean) {
	loading.value = true;
	save.value?.();
	setTimeout(() => {
		submit.value(b)
		loading.value = false;
	}, 300);
}
</script>

<style scoped>
#match-header-container {
	padding: 0 3%;

	--container-margin: 20px;
	--container-bg-color: #fff;
}

.match-header-row {
	display: flex;
	height: auto;
	align-items: center;

	margin: var(--container-margin) 0;
	padding: calc(var(--container-margin));
	background-color: var(--container-bg-color);
	border-radius: var(--container-border-radius);
	box-shadow: var(--container-box-shadow);
}

.header-box {
	display: flex;
	align-items: center;
	margin-right: var(--container-margin);
}

.header-title {
	font-size: 1.5rem;
	max-width: 350px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.header-activityTag {
	margin: 0 calc(var(--container-margin) / 2);
	/* display: inline-block; */
}

.match-header-btn-box {
	display: flex;
	height: 60px;
	align-items: center;
}

.match-header-submit-btn-box {
	display: flex;
	justify-content: flex-end;
	flex: auto;
}

.match-drawer-container {
	height: 80vh;
}

.next-btn {
	/* margin-right: 10px; */
	height: 40px;
	border-radius: 5px;
}

.question-index-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.question-index {
	width: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.show-question-list-btn {
	margin: 0 10px;
}

/* 状态 */
.info,
.primary,
.danger,
.success {
	width: 50px;
	height: 24px;
	line-height: 24px;
	color: #fff;
	display: inline-block;
	text-align: justify;
	font-size: 12px;
	font-weight: 400;
	text-align: center;
	border-radius: 5px;
}

/* 赛事结束-已结束 */
.info {
	background-color: rgba(236, 128, 141, 1);

}

/* 立即报名-报名中 */
.primary {
	background: rgb(112, 182, 3);
	/* transform: translateY(-3px); */
}

/* 即将开赛-未开始 */
.danger {
	background: rgb(170, 170, 170);
	/* transform: translateY(-3px); */
}

/* 进入比赛-比赛中 */
.success {
	background: var(--color-cheng);
	/* transform: translateY(-3px); */
}

.savetime {
	color: #8a8f8d !important;
	font-size: 12px;
	display: flex;
	align-items: center;

	/* text-align: center; */
	/* width: 130px !important; */
}
</style>